<template>
  <div class="setting-message-channel-phone" v-loading="loading">
    <ui-title 
      :title="$t('setting.messageChannel.phoneMessageChannel')"
      :tips="$t('setting.messageChannel.tip.phoneMessageChannel')"
    />
    <div class="channel-content" style="margin:17px 0 25px;">
      <span class="label">{{$t('setting.messageChannel.selectChannel')}}：</span>
      <span v-if="callingType == 0" class="phone-type">{{$t('setting.messageChannel.universalPhone')}}</span>
      <span v-if="callingType == 1" class="phone-type">{{$t('setting.messageChannel.companyExclusiveNumber')}}{{` (${calledNumber})`}}</span>
    </div>
    <div class="channel-content" style="margin-bottom:10px;">
      <ui-title :title="$t('setting.messageChannel.phoneBalance')" />

      <UseCard
        ref="useCardRef"
        :title="title"
        :styleObj="styleObj"
        :cardData="cardData"
        :unit="$t('common.base.minute1')"
        :showWelfareBtn="showWelfareBtn"
        @openWelFare="openWelFare"
      >
        <div class="flex">
          <el-button type="primary" @click="pay">{{$t('common.base.recharge')}}</el-button>
          <el-button @click="payListHandle">{{$t('setting.messageChannel.rechargeRecord')}}</el-button>
        </div>
      </UseCard>
    </div>

    <sms-pay ref="smsPayRef" :title="$t('common.base.rechargeModel.callTitle')" @payHandle="payHandle"></sms-pay>

    <dialogPayLish v-model="payListVisible" :commodityCode="commodityCode"/>
  </div>
</template>
<script>
import qs from 'qs'
import platform from '@src/platform'

import * as SettingApi from '@src/api/SettingApi';

import UseCard from './use-card.vue';
import SmsPay from '@src/modules/doMyself/setting/smsMessage/components/SmsPay.vue';
import dialogPayLish from './dialog/dialogPayLish.vue';
import { t } from '@src/locales';

import NP from 'number-precision';
export default {
  name: 'setting-message-channel-phone',

  components: {
    UseCard,
    SmsPay,
    dialogPayLish
  },

  data() {
    return {
      loading:false,
      payListVisible:false,
      title: t('setting.messageChannel.universalPhone'),
      styleObj:{
        icon:'icon-phone',
        iconBgcolor:'#52C41A',
        cardBgColor:"linear-gradient(315deg,#fff,#fcfefb 71%,#f8fff4 100%,#f8fff4 0)"
      },
      cardData:{
        usage:0,
        total:0
      },

      callingType:null,//电话类型
      calledNumber:'',//通用号码
      packCode:null,//套餐码
    };
  },

  props:{
    //是否展示福利按钮
    showWelfareBtn:{
      type:Boolean,
      default:false
    },

    // 商品码
    commodityCode:{
      type:String,
      required:true
    },
  },


  mounted(){
    this.getData()
  },

  methods: {
    openWelFare(){
      this.$emit("openWelFare")
    },
    addTotal(){
      this.$refs.useCardRef?.addTotal()
    },

    // 获取电话用量
    async getData(){
      try{
        const { status, message, data } = await SettingApi.callingUsage();

        if(status !== 0) return

        const { callingTotalCount, callingUsage, callingType, calledNumber } = data

        this.cardData.usage = callingUsage
        this.cardData.total = callingTotalCount

        this.callingType = callingType
        this.calledNumber = calledNumber
        if(callingType == 1){
          this.title = t('setting.messageChannel.companyExclusiveNumber')
          this.styleObj = {
            icon:'icon-vip',
            iconBgcolor:'#FE9526',
            cardBgColor:"linear-gradient(315deg, #FFFFFF 0%, #FFFEFD 71%, #FFF4E9 100%, #FE9526 100%)"
          }
        }

      }catch (error) {
        console.log(error)
      }
    },

    async pay(){
     
      try{
        this.loading = true
        const { status, message, data = {} } = await SettingApi.getCommodityPackage({commodityCode:this.commodityCode});

        if(status !== 0) return

        const { specs = {}, pack = {} } = data || {}
        this.packCode = pack.code

        let list = []
        specs?.map(item => {
          const { code, discountDesc, name, sellingPrice, unitPrice, unitPriceDivisible } = item;
          const desc = discountDesc.split('_')
          const count = name.split('_')?.[0]

          list.push({
            id:code,
            desc:desc?.[0],
            count,
            price: t('setting.messageChannel.sellPrice', {amount: sellingPrice?.toFixed(2)}),
            unit:pack?.priceUnit,
            priceClassName:'gray-text',
            currentPrice: `${unitPriceDivisible ? '= ' : '≈ '}${unitPrice}${t('common.base.yuan')}/${pack?.priceUnit}`
          })
        })
        this.$refs.smsPayRef.openDialog({commodityCode: this.commodityCode,  packCode: this.packCode}, list);
        this.loading = false

      }catch (error) {
        this.loading = false
        console.log(error)
      }
      
    },

    payRecord(){

    },

    payHandle(selected = {}){
      const { id } = selected
      let param = {
        commodityCode:this.commodityCode,
        packCode: this.packCode,
        specCode:id,
      }
      platform.openLink(`/api/paycenter/outside/page/commodity/alipay?${qs.stringify(param)}`)
    },

    payListHandle() {
      this.payListVisible = true
    },
  },
};
</script>
<style lang="scss" scoped>
.setting-message-channel-phone {
  .channel-content{
    .phone-type{
      margin-right:4px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #595959;
      line-height: 22px;
    }
    
  }
}
</style>